HTML - Elementos componentes do HTML 9
Como ficou definido no documento 2, os elementos html podem ser divididos nas seguintes classes :
Classes dos elementos HTML:
1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer>
<header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure>
<figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code>
<data><dfn><em><i><kbd><mark><q><s><samp>
<small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table>
<tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input>
<label><legend><meter><optgroup><option><output><progress>
<select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>
Neste documento discutiremos a classe 10-ELEMENTOS DE CONTEÚDOS EM TABELA.
As tags de tabela foram fundamentais na web 1.0 para visualizar as informações de maneira alinhada verticalmente
mais ou menos como fazemos hoje com o GRID ou mesmo com a tabela nova.
Na web 1.0 só existiam as tags table, tr e td e isto limitava a formatação do restante que tinha que ser feito
por meio de recursos html extras.
Estas tags são utilizadas numa hierarquia, ou seja, você nunca vai ver uma tag tr antes de uma table. Seria um erro
de programação. Portanto, abaixo tomei a liberdade de colocar as tags na ordem que são utilizadas normalmente.
Notas :
1 - Nem todas as tags são fundamentais na table. A tag thead, por exemplo, não é obrigatória.
2 - Cuidado com o número de colunas. Deve ser sempre o mesmo tanto para o cabeçalho quanto para o corpo como para o
rodapé. Se usar um colspan a somatória de colunas deve ser o mesmo e constante em toda a tabela.
Podemos dizer que em HTML5 a tabela esta dividida em 3 partes :
Cabeçalho, corpo e rodapé.
Apresentarei todas as tags e no final um exemplo de uma tabela completa utilizando todas as tags.
1-<table>
Define uma tabela o que é mais ou menos parecido com as células do Excel.
É o container de todas as tags abaixo.
É composta pelas tags tr que define as linhas da tabela e a td que definem as colunas
da tabela
No HTML5 temos também as tags thead para indicar o header da tabela, tbody para indicar
o corpo da tabela e tfoot para indicar o rodapé da tabela.
No passado este elemento era chave de apresentação de dados porque formatava sua exibição.
Mesmo hoje é um recurso de grande utilidade e, portanto, devemos saber usar esta tag com html
puro, com css, com bootstrap, ensopada, guizada, frita etc.
Hoje em dia a tag table perdeu as funcionalidades de formatação de apresentação
para as tags div e o Grid.
Como é exibida uma tabela simples com 2 linhas e 3 colunas por linha - Com bordas :
| Linha 1 - Coluna 1 |
Linha 1 - Coluna 2 |
Linha 1 - Coluna 3 |
| Linha 2 - Coluna 1 |
Linha 2 - Coluna 2 |
Linha 2 - Coluna 3 |
Como a tabela acima foi definida:
<table border="1">
<tr>
<td>Linha 1 - Coluna 1</td>
<td>Linha 1 - Coluna 2</td>
<td>Linha 1 - Coluna 3</td>
</tr>
<tr>
<td>Linha 2 - Coluna 1</td>
<td>Linha 2 - Coluna 2</td>
<td>Linha 2 - Coluna 3</td>
</tr>
</table>
Eu coloquei border=1 para pode visualizar as linhas da tabela
Mas fica melhor com um espaçamento entre o conteúdo da célula e a borda da tabela
(cell padding)
| Linha 1 - Coluna 1 |
Linha 1 - Coluna 2 |
Linha 1 - Coluna 3 |
| Linha 2 - Coluna 1 |
Linha 2 - Coluna 2 |
Linha 2 - Coluna 3 |
Código:
<table border="1" cellpadding="10" cellspacing="10">
<tr>
<td>Linha 1 - Coluna 1</td>
<td>Linha 1 - Coluna 2</td>
<td>Linha 1 - Coluna 3</td>
</tr>
<tr>
<td>Linha 2 - Coluna 1</td>
<td>Linha 2 - Coluna 2</td>
<td>Linha 2 - Coluna 3</td>
</tr>
</table>
Podemos exibir uma tabela para destacar um ponto que queremos ter certeza que o cliente
verá. Hoje a gente costuma fazer isso com uma simples div mas é um recurso alternativo
disponível.
Código:
<table style="border:10px solid red;">
<tr>
<td style="padding:15px;">Detalhe Importante: ...</td>
</tr>
</table>
Podemos dar um tom lúdico a um box num site infantil fazendo com que a borda fique pontilhada:
Código:
<table style="border:10px dotted blue;">
<tr>
<td style="padding:15px;">Detalhe Importante: ...</td>
</tr>
</table>
Podemos dar um tom de lembrete ao colocar a borda dupla :
Código:
<table style="border:10px double green;">
<tr>
<td style="padding:15px;">Detalhe Importante: ...</td>
</tr>
</table>
2-<caption>
Define um titulo para a tabela. Esta mensagem é exibida no rodapé da tabela, logo após a tabala, como se a tabela
fosse uma imagem e esta tag seria sua descrição logo abaixo alinhada à esquerda. Esta tag é opcional.
3-<thead>
É uma tag agrupadora dos elementos de cabeçalho da tabela. Toda formatação do cabeçalho de tabela é feita aqui.
Nota: Esta tag é opcional já que podemos querer que a tabela não tenha cabeçalho.
Agrupa tags tr e th.
<th>
Representa uma coluna do cabeçalho da tabela.
4-<tbody>
É a tag agrupadora do conteúdo da tabela. Representa o corpo da tabela. Esta tag é opcional mas lógicamente a tabela
irá exibir dados e, portanto, as tags tr e td serão exibidas sem agrupadores.
Agrupa as tags tr e td.
É a tag agrupadora dos elementos do rodapé da tabela. Normalmente exibem um sumário, um resumo ou totalização dos dados
da tabela. Todos os itens desta tag são opcionais.
Nota : Este elemento é exibido sem destaque e pode ser confundido com uma linha da tabela e não uma linha de
totalização.
Agrupa as tags tr e td como no body.
<colgroup>
É um agrupador de colunas e é normalmente usado até mesmo antes do header da tabela para definir a cor de fundo
para o grupo de colunas selecionado e sempre deve ter como tag pai a tag table. Ela agrupa as colunas e define
um fundo para elas destacando-as das demais. Agrupa a tag col.
<col>
É uma coluna da tag agrupadora colgroup. Define um aspecto diferenciado para as colunas por ele agrupadas. Sua tag
pai é a colgroup.
<td>
Representa uma coluna da tabela tanto do corpo como do rodapé. Apenas o cabeçalho da tabela tem uma definição de coluna
diferente com a tag th.
<tr>
Define uma linha na tabela. É usada em todas as partes da tabela ( cabeçalho, corpo e rodapé. )
Exemplo 1 (todos os componentes da tabela):
<table style="width:100%;">
<caption>Vendas Mensais</caption>
<colgroup>
<col span="2" style="background-color:lightblue">
<col style="background-color:yellow">
</colgroup>
<thead style="border:1px dotted green">
<tr style="text-align:center">
<th style="padding:10px;">Mês</th>
<th>Faturamento</th>
<th>Líquido</th>
</tr>
</thead>
<tbody style="text-align:center">
<tr>
<td style="padding:10px;">Janeiro</td>
<td>R$ 12.378,56</td>
<td>R$ 3.496,24</td>
</tr>
<tr>
<td style="padding:10px;">Fevereiro</td>
<td>R$ 17.236,43</td>
<td>R$ 5.936,64</td>
</tr>
</tbody>
<tfoot style="color:blue;font-weight:bold;text-align:center">
<tr>
<td style="padding:10px;">Total</td>
<td>R$ 29.614,99</td>
<td>R$ 9.432,88</td>
</tr>
</tfoot>
</table>
Como o browser exibe :
Vendas Mensais
| Mês |
Faturamento |
Líquido |
| Janeiro |
R$ 12.378,56 |
R$ 3.496,24 |
| Fevereiro |
R$ 17.236,43 |
R$ 5.936,64 |
| Total |
R$ 29.614,99 |
R$ 9.432,88 |
<colspan>
Algumas vezes desejamos expandir uma coluna para que ocupe o espaço de 2 ou mais colunas.
Para isto utilizamos o atributo colspan em uma tag td.
Exemplo:
<td colspan"2">Esta coluna terá 2 colunas de largura</td>
<rowspan>
Algumas vezes desejamos expandir uma linha para que ocupe o espaço de 2 ou mais linhas.
Para isto utilizamos o atributo rowspan em uma tag tr.
Exemplo:
<tr rowspan"2"><td>Esta linha terá 2 linhas de altura</td></tr>
Exemplo 2 (colspan e rowspan):
<table style="width:100%;">
<tr>
<td colspan="2" style="border:1px solid red">col1 com colspan2</td>
<td style="border:1px solid red">col2</td>
</tr>
<tr>
<td style="border:1px solid red;width:60%">col 1-2 sem nada</td>
<td style="border:1px solid red;width:20%">col 2-2 sem nada</td>
<td style="border:1px solid red;width:20%">col 3-2 sem nada</td>
</tr>
<tr rowspan="2">
<td style="border:1px solid red">
col1-3 dentro de uma rowpan 2-
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a nunc a purus fermentum efficitur.
Etiam scelerisque iaculis dapibus. Cras lectus eros, vehicula a aliquam sit amet, tristique vitae nisl.
Vivamus at ultrices elit, eget lobortis lacus. Nulla ut imperdiet dolor.
</td>
<td style="border:1px solid red">col2-3</td>
<td style="border:1px solid red">col3-3</td>
</tr>
</table>
Como o browser exibe :
| col1 com colspan2 |
col2 |
| col 1-2 sem nada |
col 2-2 sem nada |
col 3-2 sem nada |
|
col1-3 dentro de uma rowpan 2-
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a nunc a purus fermentum efficitur.
Etiam scelerisque iaculis dapibus. Cras lectus eros, vehicula a aliquam sit amet, tristique vitae nisl.
Vivamus at ultrices elit, eget lobortis lacus. Nulla ut imperdiet dolor.
|
col2-3 |
col3-3 |
Nota : Na linha central coloquei a largura de 60%, 20% 3 20% da tela para cada coluna senão na terceira linha ela ocuparia
toda a largura da tela e espremeria as colunas à direita e as faria ocupar mais de uma linha e aí o efeito do
rowspan não seria visivel.
Nota : Ao expandir uma linha ou uma coluna da tabela para exibir um certo resultado pode fazer com que as demais
colunas ou linhas sejam afetadas pois todas as colunas tem a mesma largura e todas as linhas tem a mesma altura.